<template>
	<view>

		<view class="u-page">

			<view class="bg" :style="{backgroundImage:'url('+imagesurl+'app/images/gobals.png)'}">

				<!-- 提示 -->
				<view v-if="!Toptag"
					style=" padding: 20rpx; position: relative;z-index: 999;top:20rpx ;background: #515151;width: 700rpx;height: 70rpx;margin: auto;color: #fff;display: flex;align-items: center;  justify-content: space-between;">
					<view class="u-flex">
						<image src="/static/loge.png" style="width: 50rpx;height: 50rpx;"></image>
						<view class="" style="margin-left: 20rpx;">
							<view style="font-size: 22rpx;">吉吉福利号</view>
							<view style="font-size: 18rpx;color: #F1F1F1;">添加了解更多详情</view>
						</view>
					</view>
					<view class="clearfix custom-btn"
						style="border-radius: 20rpx;text-align: center;border: 1rpx solid #fff;font-size: 22rpx;height: 40rpx;line-height: 40rpx;padding:0 15rpx;line-height: 40rpx;">
						立即添加
						<button open-type="contact"></button>
					</view>
					<view style="position: absolute;right: -10rpx;top: -10rpx;" @click="cToptag">
						<u-icon name="close-circle-fill" color="#fff" size="35"></u-icon>
					</view>

				</view>

				<!-- 天气和视频 -->
				<view class="u-margin-top-20">
					<view class="weather" :style="{backgroundImage:'url('+imagesurl+'app/images/weater.png)'}">
						<view class="">
							{{weathers}}
						</view>
						<view class="">
							{{temperature}}℃
						</view>
					</view>


					<view class="uservedio">
						<navigator url="../help/detail?id=2">
							<image src="../../static/uservedio.png" style="width: 80rpx;height: 80rpx;"></image>
						</navigator>

					</view>

				</view>

				<view style="width: 400rpx;text-align: center;margin: auto;">
					<image src="/static/ball.png" mode="widthFix" style="width: 400rpx;" @click="sidebarClick "
						:class="'animation-' + animation"></image>
				</view>



			</view>

			<!-- 滚动栏 -->
			<view style="position: relative;top: 480rpx;background: #FFFFFF;border-radius: 20rpx;padding: 20rpx ">
				<scroll-view scroll-y="true" style="padding-bottom: 150rpx;">
					<view class="u-flex u-row-between">
						<navigator url="../list/index" hover-class="none">
							<view class="mode1" :style="{backgroundImage:'url('+imagesurl+'app/images/wantbg.png)'}" style="position: relative;">
								<image :src="imagesurl+'app/images/rain.gif'" style="width: 130rpx;height: 120rpx;position: absolute;right: 6rpx;bottom: 0rpx;"></image>
								<view style="color: #fff;font-size: 40rpx;padding: 40rpx 20rpx  20rpx 20rpx;">我要洗车
								</view>
								<!-- <view class="today">今日洗车{{carWashNum}}人</view> -->
							</view>
						</navigator>
						<navigator url="../apply/index" hover-class="none">
							<view class="mode1" :style="{backgroundImage:'url('+imagesurl+'app/images/kaidian.png)'}">
								<view style="color: #fff;font-size: 40rpx;padding: 40rpx 20rpx  20rpx 20rpx;">我要开店
								</view>
								<!-- <view class="today">今日咨询{{applyNum}}人</view> -->
							</view>
						</navigator>
					</view>
					
					
					
					<view class="bg2 u-padding-30 u-margin-top-20" :style="{backgroundImage:'url('+imagesurl+'app/images/allwash.png)'}" @click="goall">
					   <view style="font-size: 34rpx;font-weight: bold;">万能洗</view>
					   <view style="font-size: 22rpx;font-weight: bold;margin-top: 20rpx;">
						   (可以洗无牌车，电动车，摩托车，助力车，地毯等)<u-icon name="arrow-right" color="#fff"></u-icon>
					   </view>
					</view>

					<view class="u-flex u-row-between u-margin-top-20">
						<view class="mode2" :style="{backgroundImage:'url('+imagesurl+'app/images/shop.png)'}">
							<navigator url="../shop/index">
								<view
									style="color: #fff;font-size: 32rpx;color: #F2A2A3;line-height: 100rpx;padding-left: 40rpx;">
									积分商城</view>

							</navigator>

						</view>
						
						
						
						<view class="mode2" :style="{backgroundImage:'url('+imagesurl+'app/images/company.png)'}">
							<navigator url="../await/index">
								<view
									style="color: #fff;font-size: 32rpx;color: #FF9D3C;line-height: 100rpx;padding-left: 40rpx;">
									公司官网</view>
							</navigator>

						</view>
					</view>
					
				

					<view style="margin: 20rpx 0;">
						<u-notice-bar mode="vertical" :list="nav"></u-notice-bar>
					</view>
					
			
					
				

					<view class="banner">
						<u-swiper :list="banner" height="230" @click="clkbanner" name="cover"></u-swiper>
					</view>

					<view style="padding: 20rpx 0;">
						<u-section title="更多服务" color="#488CEF" :arrow="false" sub-title=" " font-size="32"></u-section>
					</view>


					<view class="u-flex u-row-between">
						<view>
							<navigator url="../vip/index">
								<image :src="$ftpUrl('/app/images/vip.png')" style="width: 334rpx;height: 380rpx;"></image>
							</navigator>
						</view>
						<view class=""
							style="width: 352rpx;display: flex;justify-content: space-between;flex-direction: column;height: 380rpx;">
							
								<image :src="$ftpUrl('/app/images/lovecar.png')" style="width: 352rpx;height: 177rpx;" @click="goswcitab"></image>
							
							<navigator url="../stare/index">
								<image :src="$ftpUrl('/app/images/stare.png')" style="width: 352rpx;height: 177rpx;"></image>
							</navigator>
						</view>
					</view>

					<view style="padding: 20rpx 0;">
						<u-section title="企业合作" color="#488CEF" :arrow="false" sub-title=" " font-size="32"></u-section>
					</view>

					<view class="" style="display:flex;overflow-x: scroll;">
						<view style="width: 150rpx;margin-right: 20rpx;" v-for="(item,index) in hezuo" :key="index">
							<u-image :src="item.cover" width="150" height="150" border-radius="20"></u-image>
						</view>
					</view>

				

				</scroll-view>
			</view>


			<view
				style="position: fixed;right:0;bottom: 500rpx;width: 90rpx;height: 90rpx;border-radius: 100%;background:rgba(0,0,0,0.3);display: flex;justify-content: center;"
				class="custom-btn">
				<button open-type="share"></button>
				<view style="color: #fff;text-align: center;margin-top: 10rpx;">
					<u-icon name="share" color="#fff" size="40"></u-icon>
					<view style="font-size: 22rpx;">分享</view>
				</view>


			</view>


		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar @change="select" :list="tabbar" :mid-button="true" height="100rpx" active-color="#0263C2"></u-tabbar>
	</view>
</template>

<script>
	import scan from '@/common/scan.js';
	import url from '@/common/baseUrl.js';
	import amapFile from '@/common/amap-wx.js';
	

	const app = getApp()
	export default {
		data() {
			return {
				animation: '', // 动画样式
				Toptag: uni.getStorageSync('Toptag'),
				tabbar: [],
				imagesurl: url.imageUrl,
				city: "",
				weathers: "",
				temperature: "",
				carWashNum: "",
				applyNum: "",
				info: {

				},
				navlist: [],
				nav: [],
				hezuo: [],
				banner: [],
				isTitle: ""

			}
		},
		onReady() {
			this.tabbar = this.$store.state.tabbar
		},
		onLoad() {


			this.getConfig()
			this.getnotice()
			this.getbanner(1)
			this.getbanner(2)
			this.statistics()

		},
		onShow() {
			app.getlocation()
			this.weather()
		},
		methods: {
			select(e){
				if(e==2){
					scan.scan()
				}
			},
			goswcitab(){
				uni.switchTab({
					url:'/pages/active/index'
				})
			},
			goall(){
				 uni.navigateTo({
				 	url:"../list/index?isall=true"
				 })
			},
			sidebarClick() {
				this.animation = 'shake';
				setTimeout(() => {
					this.animation = ''
				}, 2000);
			},
			cToptag() {
				uni.setStorageSync('Toptag', true),
					this.Toptag = true
			},
			getConfig() {
				this.$u.api.getConfig().then(res => {

					uni.setNavigationBarTitle({
						title: res.siteName
					})
					this.isTitle = res.siteName;
				}).catch(err => {

				})
			},


			statistics() {
				return new Promise((resolve, reject) => {
					this.$u.api.statistics().then(res => {
						var {
							carWashNum,
							applyNum
						} = res;
						this.carWashNum = JSON.stringify(carWashNum);
						this.applyNum = JSON.stringify(applyNum);

						resolve(res)

					}).catch(err => {

					})
				})

			},


			getnotice() {
				this.$u.post('/api/index/notice', {

				}).then(res => {
					this.navlist = res;
					var arr = [];
					this.navlist.forEach(item => {
						arr.push(item.title)
					})
					this.nav = arr;
				}).catch(err => {

				})
			},
			getbanner(classify) {
				this.$u.post('/api/index/banner', {
					classify: classify
				}).then(res => {
					if (classify == 1) {
						this.banner = res

					}
					if (classify == 2) {
						this.hezuo = res
					}
				}).catch(err => {

				})

			},

			weather() {
				var myAmapFun = new amapFile.AMapWX({
					key: '71499693acfa5121b67264185d7f7199'
				});
				myAmapFun.getWeather({
					success: (res) => {
						console.log(res)
						this.city = res.city.data;
						this.weathers = res.weather.data;
						this.temperature = res.temperature.data;
					},
					fail: (err) => {

					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.bg {
		background-size: cover;
		width: 100%;
		height: 550rpx;
		position: fixed;
		display: inline-block;
		top: 0;

	}
	.bg2{
		background-size: cover;
		width: 710rpx;
		height: 150rpx;
		background-repeat: no-repeat;
		color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.animation-shake {
		animation: shake 0.5s !important;
	}

	@keyframes shake {
		0% {
			transform: scale(0.8);

		}

		20% {
			transform: scale(0.9);
		}

		50% {
			transform: scale(1);
		}




	}

	.weather {
		background-size: cover;
		width: 100rpx;
		height: 100rpx;
		color: #3464D6;
		text-align: center;
		line-height: 45rpx;
		z-index: 999;
		margin-left: 20rpx;

	}

	.uservedio {
		position: absolute;
		right: 20rpx;
		top: 100rpx;
	}

	.mode1 {
		width: 347rpx;
		height: 194rpx;
		background-size: cover;

		.today {
			padding: 7rpx 14rpx;
			background: #5EAEE1;
			border-radius: 0px 25rpx 0px 25rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			display: table;
			margin-left: 20rpx;
		}
	}

	.mode2 {
		width: 344rpx;
		height: 100rpx;
		background: #FAE6CE;
		border-radius: 15rpx 30rpx 15rpx 30rpx;
		background-size: cover;
	}
</style>
